<template>
  <div class='main'>
    <div style='float: right'>
      <el-button @click='goToLogin'>系统登录</el-button>
    </div>
    <div class='centext'>
      <div style='text-align: center;margin-top: 3%'>
        <span style='font-size: 30px'>健康信息填报系统</span>
      </div>
      <div class='form'>
        <el-row :gutter='15'>
          <el-form ref='elForm' :model='formData' :rules='rules' size='medium' label-width='100px'>
            <el-col :span='24'>
              <el-form-item label='上报日期' prop='time'>
                <el-date-picker v-model='formData.time' format='yyyy-MM-dd' value-format='yyyy-MM-dd'
                                :style="{width: '100%'}" placeholder='请选择上报日期' clearable readonly></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span='24'>
              <el-form-item label='学号' prop='student.studentID' :rules="[{required: true,message: '请输入学号',trigger: 'blur'}]">
                <el-input v-model='formData.student.studentID' placeholder='请输入学号' clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span='24'>
              <el-form-item label='姓名' prop='student.studentName' :rules="[{required: true,message: '请输入姓名',trigger: 'blur'}]">
                <el-input v-model='formData.student.studentName' placeholder='请输入姓名' clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span='24'>
              <el-form-item label='今日体温' prop='bodyTemperature'>
                <el-input v-model='formData.bodyTemperature' placeholder='请测量体温后填写' clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label-width='101px' label='是否咳嗽' prop='cough'>
                <el-radio-group v-model='formData.cough' size='medium'>
                  <el-radio v-for='(item, index) in coughOptions' :key='index' :label='item.value'
                            :disabled='item.disabled'>{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label-width='160px' label='是否有外出情况' prop='travel'>
                <el-radio-group v-model='formData.travel' size='medium'>
                  <el-radio v-for='(item, index) in travelOptions' :key='index' :label='item.value'
                            :disabled='item.disabled'>{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span='24'>
              <el-form-item label-width='170px' label='是否有乏力、呼吸困难、胸闷、腹泻等症状' prop='sick'>
                <el-radio-group v-model='formData.sick' size='medium'>
                  <el-radio v-for='(item, index) in sickOptions' :key='index' :label='item.value'
                            :disabled='item.disabled'>{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span='24'>
              <el-form-item label='备注' prop='remark'>
                <el-input v-model='formData.remark' type='textarea' placeholder='如有健康情况异常、特殊外出情况、接受隔离等，请在备注中详细填写。'
                          :maxlength='200' :autosize='{minRows: 4, maxRows: 4}' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='24'>
              <el-form-item size='large'>
                <el-button type='primary' @click='submitForm'>提交</el-button>
                <el-button @click='resetForm'>重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    function dateFormMatter() {
      const Dates = new Date()
      const Y = Dates.getFullYear()
      const M = Dates.getMonth() + 1
      const D = Dates.getDate()
      const times = Y + (M < 10 ? '-0' : '-') + M + (D < 10 ? '-0' : '-') + D
      return times
    }
    return {
      formData: {
        time: dateFormMatter(),
        student: {
          studentID: undefined,
          studentName: undefined
        },
        bodyTemperature: undefined,
        cough: 0,
        sick: 0,
        travel: 0,
        remark: undefined
      },
      rules: {
        time: [],
        bodyTemperature: [{
          required: true,
          message: '体温不能为空',
          trigger: 'blur'
        }],
        cough: [{
          required: true,
          message: '是否咳嗽不能为空',
          trigger: 'change'
        }],
        sick: [{
          required: true,
          message: '是否有乏力、呼吸困难、胸闷、腹泻等症状不能为空',
          trigger: 'change'
        }],
        travel: [{
          required: true,
          message: '是否有外出情况不能为空',
          trigger: 'change'
        }],
        remark: [{
          required: false,
          message: '如有健康情况异常、特殊外出情况、接受隔离等，请在备注中详细填写。',
          trigger: 'blur'
        }]
      },
      coughOptions: [{
        'label': '是',
        'value': 1
      }, {
        'label': '否',
        'value': 0
      }],
      sickOptions: [{
        'label': '是',
        'value': 1
      }, {
        'label': '否',
        'value': 0
      }],
      travelOptions: [{
        'label': '是',
        'value': 1
      }, {
        'label': '否',
        'value': 0
      }]
    }
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/api/bodytemperature/add', this.formData)
        if (res.code !== 0) this.$message.error(res.msg)
        this.$notify({
          title: '成功',
          message: '健康信息上报成功',
          type: 'success'
        })
        this.resetForm()
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    goToLogin() {
      this.$router.push('/login')
    }
  }
}

</script>
<style lang='less' scoped>
.main {
  background-color: #227e8c;
  height: 100%;
}

.centext {
  width: 40%;
  height: 86%;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.form {
  margin: 8% 3% 0 2%;
}
</style>
